<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="js/messageBox.js"></script>
    <link rel="stylesheet" href="css/messageBox_m.css">
    <style>
        .megBox{padding:15px;}
        .megBox ul{margin:0;padding:0;}
        .megBox li{list-style: none;float:left;}
        .megBox li a{
            display: block;
            margin-right:12px;
            padding:5px 12px;
            background-color: #d70051;
            color:#fff;
            cursor:pointer;
        }
    </style>
</head>

<body>
<div class="megBox">
    <ul>
        <li><a onclick="showAlert()">Alert</a></li>
        <li><a onclick="showConfirm()">Confirm</a></li>
    </ul>
</div>
</body>
<script>
    function showAlert() {
        MessageBox.alert({
            'title': '提示',
            'content': '提示内容主体',
            'okBtn': '确定',
            'onConfirm': function () {
                console.log("回调触发后隐藏提示框");
                //alert("回调触发后隐藏提示框");
            }
        });
    }
    function showConfirm() {
        MessageBox.confirm({
            'title': '提示',
            'content': '离开本页面进行',
            'okBtn': '确定',
            'onConfirm': function () {
                console.log("OK - 回调触发后隐藏提示框");
                //alert("OK - 回调触发后隐藏提示框");
            }/*,
            'onCancel': function () {
                console.log("Cancel-回调触发后隐藏提示框");
                alert("Cancel-回调触发后隐藏提示框");
            }*/
        });
    }
</script>

</html>